import React from 'react'
import { NavBar, Card, Toast, List, Checkbox } from 'antd-mobile'
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
import { Alipay, WechatPay, Checked } from '@react-vant/icons';
import instance from '../../api/instance'

function Index() {
    let navigate = useNavigate()

    const [sp] = useSearchParams()
    const id = sp.get('id')
    const title = sp.get('title')
    const price = sp.get('price')

    const handelZf = async () => {
        const res = await instance.get('/api/pay', { params: { id, title, price } })
        console.log('res', res)
        const { code, data, message } = res.data
        if (code == 200) {
            window.location.href = data
        }
        else {
            Toast.show({
                icon: 'fail',
                content: message,
            })
        }
    }
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>支付页面</NavBar>
            <List>
                <List.Item prefix={<Alipay color='blue' />} onClick={() => handelZf()}>支付宝</List.Item>
                <List.Item prefix={<WechatPay color='green' />} onClick={() => Toast.show('暂不支持微信支付')}>微信</List.Item>
                <List.Item prefix={<Checked color='red' />} onClick={() => Toast.show('暂不支持云闪付')}>云闪付</List.Item>
            </List>
        </div>
    )
}

export default Index
